<template>
	<view class="mine-container">
		<!-- 顶部用户信息 -->
		<view class="user-card" v-if="isLogin">
			<view class="avatar-container" @click="chooseAvatar">
				<image class="user-avatar" :src="getImageUrl(userInfo.avatar) || '/static/avatar/default.png'"></image>
				<view class="edit-avatar">
					<image class="camera-icon" src="/static/icons/camera.png"></image>
				</view>
			</view>
			<view class="user-info">
				<text class="user-name">{{userInfo.nickname || userInfo.username}}</text>
				<text class="user-phone">{{userInfo.phone || '未绑定手机号'}}</text>
			</view>
			<view class="edit-profile" @click="navigateTo('/pages/mine/profile')">
				<uni-icons type="person-filled" size="18" color="#fff"></uni-icons>
				<text>编辑</text>
			</view>
		</view>
		
		<view class="login-card" v-else>
			<image class="login-avatar" src="/static/avatar/default.png"></image>
			<view class="login-prompt">
				<text class="login-text">登录享受更多服务</text>
				<button class="login-btn" @click="goToLogin">立即登录</button>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-title">我的服务</view>
			<view class="menu-list">
				<view class="menu-item" @click="navigateTo('/pages/service/history')">
					<view class="menu-item-left">
						<text class="menu-name">我的记录</text>
					</view>
				</view>
				
				<view class="menu-item" @click="goToMyActivity">
					<view class="menu-item-left">
						<text class="menu-name">我的活动</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-title">个人信息</view>
			<view class="menu-list">
				<view class="menu-item" @click="navigateTo('/pages/mine/profile')">
					<view class="menu-item-left">
						<text class="menu-name">个人资料</text>
					</view>
				</view>
				
				<view class="menu-item" @click="navigateTo('/pages/mine/change-password')">
					<view class="menu-item-left">
						<text class="menu-name">修改密码</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-title">设置</view>
			<view class="menu-list">
				<view class="menu-item" @click="showFeedback">
					<view class="menu-item-left">
						<text class="menu-name">意见反馈</text>
					</view>
				</view>
				
				<view class="menu-item" @click="showAbout">
					<view class="menu-item-left">
						<text class="menu-name">关于我们</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<button class="logout-btn" v-if="isLogin" @click="handleLogout">退出登录</button>
	</view>
</template>

<script>
import { updateUserAvatar } from '@/api/user.js';
import { getImageUrl } from '@/utils/image.js';

export default {
	data() {
		return {
			userInfo: null,
			isLogin: false
		}
	},
	onLoad() {
		this.checkLogin();
	},
	onShow() {
		this.checkLogin();
	},
	methods: {
		getImageUrl,
		// 检查登录状态
		checkLogin() {
			const token = uni.getStorageSync('token');
			const userInfo = uni.getStorageSync('userInfo');
			
			this.isLogin = !!token && !!userInfo;
			this.userInfo = userInfo || {};
		},
		
		// 跳转到登录页
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		
		// 页面导航
		navigateTo(url) {
			if (!this.isLogin) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.goToLogin();
						}
					}
				});
				return;
			}
			
			uni.navigateTo({
				url
			});
		},
		
		// 选择并更新头像
		chooseAvatar() {
			if (!this.isLogin) {
				this.goToLogin();
				return;
			}
			
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					this.uploadAvatar(tempFilePath);
				}
			});
		},
		
		// 上传头像
		async uploadAvatar(filePath) {
			uni.showLoading({
				title: '上传中...'
			});
			
			try {
				const res = await updateUserAvatar(filePath);
				if (res.code === 200) {
					// 更新本地缓存的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					userInfo.avatar = res.data;
					uni.setStorageSync('userInfo', userInfo);
					
					// 更新页面显示
					this.userInfo = userInfo;
					
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.message || '上传失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('上传头像失败', error);
				uni.showToast({
					title: '上传失败，请稍后重试',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		// 显示意见反馈
		showFeedback() {
			uni.showModal({
				title: '意见反馈',
				content: '感谢您的反馈，请在服务页面选择"投诉建议"进行反馈提交',
				showCancel: false,
				confirmText: '我知道了'
			});
		},
		
		// 显示关于我们
		showAbout() {
			uni.showModal({
				title: '关于我们',
				content: '智能社区服务平台 v1.0.0\n为社区居民提供便捷的智能服务',
				showCancel: false,
				confirmText: '确定'
			});
		},
		
		// 处理退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录信息
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						
						// 更新状态
						this.isLogin = false;
						this.userInfo = null;
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
					}
				}
			});
		},
		
		// 跳转到我的活动
		goToMyActivity() {
			if (!this.isLogin) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.goToLogin();
						}
					}
				});
				return;
			}
			
			uni.navigateTo({
				url: '/pages/mine/activities',
				fail: (err) => {
					console.error('跳转到我的活动失败', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 30rpx;
}

.user-card {
	background: linear-gradient(to right, #007AFF, #1CB5E0);
	padding: 60rpx 40rpx;
	display: flex;
	align-items: center;
	position: relative;
}

.avatar-container {
	position: relative;
}

.user-avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.edit-avatar {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40rpx;
	height: 40rpx;
	background-color: #007AFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2rpx solid #fff;
}

.camera-icon {
	width: 24rpx;
	height: 24rpx;
}

.user-info {
	margin-left: 30rpx;
	color: #fff;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-phone {
	font-size: 26rpx;
	opacity: 0.9;
	background-color: rgba(255, 255, 255, 0.15);
	padding: 6rpx 16rpx;
	border-radius: 30rpx;
	display: inline-block;
	max-width: 300rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.edit-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
}

.edit-profile text {
	color: #fff;
	font-size: 22rpx;
	margin-top: 4rpx;
}

.login-card {
	background: linear-gradient(to right, #007AFF, #1CB5E0);
	padding: 60rpx 40rpx;
	display: flex;
	align-items: center;
}

.login-avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.login-prompt {
	margin-left: 30rpx;
	color: #fff;
}

.login-text {
	font-size: 30rpx;
	margin-bottom: 20rpx;
}

.login-btn {
	background-color: #fff;
	color: #007AFF;
	font-size: 24rpx;
	padding: 6rpx 30rpx;
	border-radius: 30rpx;
	margin: 0;
	line-height: 1.8;
	width: 160rpx;
	text-align: center;
}

.menu-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 0 30rpx;
	border-radius: 16rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.menu-title {
	font-size: 28rpx;
	color: #999;
	padding: 30rpx 0 20rpx;
	font-weight: 500;
}

.menu-list {
	border-radius: 10rpx;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background-color: #f9f9f9;
}

.menu-item-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.menu-name {
	font-size: 30rpx;
	color: #333;
}

.arrow-icon {
	width: 30rpx;
	height: 30rpx;
	opacity: 0.6;
}

.logout-btn {
	width: 90%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background-color: #fff;
	color: #FF5151;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-top: 60rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.logout-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}
</style> 